<template>
	<view>
		<view class="login-bm">
			<image src="https://cnxfljj.cncn.gov.cn/uploads/20210728/4a50b6066c2bf0744923eaeef341ac14.jpg" mode="widthFix"></image>
		</view>
		<view class=" container mar-t-20" >
			<view class="login-box bac-color-fff">
				<view class="flex text-center">
					<view class="user-radio font-size-18 font-bold flex align-center justify-center text-center w-100" @click="type='member'" :class="{active:type=='member'}">
						<view class="flex align-center justify-center pad-t-20 text-center w-100">用户登录</view>
					</view>
					<!-- <view class="counselor-radio flex-1" @click="type='counselor'"  :class="{active:type=='counselor'}">咨询师登录</view> -->
				</view>

				<view  style="min-height:450rpx; " class=" pos-rel " v-if="type=='member'">
					<view class="flex text-middle align-center pad-l-20 mar-t-20 border-b-1 ">
						<image class="w-h-20" src="@/static/icons/account.png"></image>
						<input type="text" placeholder="手机号码" class="user-account flex-1" v-model="mobile">
					</view>
					<view class="flex text-middle align-center pad-l-20 pad-r-10 border-b-1">
						<image class="w-h-20" src="@/static/icons/password.png"></image>
						<input type="text" placeholder="验证码" class="user-password flex-1" v-model="code">
						<button class="font-size-13  verification" :disabled="isdisabled" @click="getShotCode">{{codeText}}</button>
					</view>
					<view class="text-center w-100 mar-t-30">
						<button @click="mobilelogin" class="login-btn text-center">登录</button>
					</view>
				</view>
				<view  style="min-height:450rpx;" class="pos-rel" v-else>
					<view class="flex text-middle align-center pad-l-20 mar-t-20 border-b-1">
						<image class="w-h-20" src="@/static/icons/account.png"></image>
						<input type="text" placeholder="请输入账号" class="user-account flex-1" v-model="account">
					</view>
					<view class="flex text-middle align-center pad-l-20 border-b-1">
						<image class="w-h-20" src="@/static/icons/password.png"></image>
						<input type="password" placeholder="请输入密码" class="user-password flex-1" v-model="password">
					</view>
					<view class="text-center mar-t-30">
						<button @click="counselorLogin" class="login-btn text-center">咨询师账号登录</button>
					</view>
					
				</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
import { testLogin,counselorLogin,mobileLogin,smsSend} from '@/utils/http'
export default {
	data(){
		return {
			uid:1,
			type:'member',
			account:'',
			password:'',
			isdisabled:false,
			code:'',
			mobile:'',
			codeText: '获取验证码',
		}
	},
	methods: {
		testLogin() {
			testLogin({uid:this.uid}).then(res => {
				if (res) {
					uni.setStorageSync('user_info', res)
					this.store.commit('fn_set_user_info',res)
						uni.switchTab({
						url: '/'
					})
					
				}
			})
		},
		//咨询师登录
		counselorLogin(){
			if(this.account && this.password){
				counselorLogin({account:this.account,password:this.password}).then(res=>{
					if (res) {
						uni.setStorageSync('user_info', res)
						this.store.commit('fn_set_user_info',res)
						uni.switchTab({
							url: '/'
						})
					}
				})
			}else{
				this.errorToShow('请输入账号密码');
			}
			
		},
		//获取验证码
		getShotCode() {
			if (!this.mobile) {
				uni.showModal({
					title: '提示',
					content: '请输入您的手机号码'
				})
				return;
			}
			this.isdisabled = true
			this.setTime();
			smsSend({
				mobile: this.mobile,
				event: 'mobilelogin'
			}).then(res=>{
				this.setTime();
			}).then(res=>{
				this.isdisabled = false;
			})
		},
		setTime() {
			let time = 60
			// let i = 0
			this.isdisabled = true
			let set = setInterval(() => {
				this.codeText = --time + '秒后重发'
				this.isdisabled = true
			}, 1000);
			setTimeout(() => {
				this.isdisabled = false
				this.codeText = '获取验证码'
				clearInterval(set) //清除计时器
			}, time * 1000);
			
		},
		//手机号码登录
		mobilelogin(){
			mobileLogin({mobile:this.mobile,captcha:this.code}).then(res=>{
				if(res){
					uni.setStorageSync('user_info', res)
					this.store.commit('fn_set_user_info',res)
					uni.switchTab({
						url: '/'
					})
				}
			})
		}
	},
	onLoad(){
		
		// let url = "http://localhost:8080/#/pages/login/test"
		// let url = window.location.href;
		// location.href= "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=jtjyzhfwyyxt&goto="+encodeURIComponent(url);
		//location.href= "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=jtjyzhfwyyxt";
		// let pages = getCurrentPages();
		// console.log(window.location.href);
		//let page = uni.getStorageSync('page')??'/';
		// console.log(page);
		// console.log(encodeURIComponent("http://localhost:8080/pages/login/index"));
	}
}
</script>

<style scoped>
page{
	background-color: #f4f6f8;
}
.login-box{
	box-shadow: 1px 2px 3px rgba(204, 201, 201, 0.5);
	border-radius: 10px;

	
}
.login-box .user-radio,.login-box .counselor-radio{
	padding: 16px 20px;;
	background-color: #ececec;
	color: #616161;
	font-size: 15px;
	
}
.login-box .active{
	background-color: #fff;
	color:#616161;
}
.login-bm image{
	/* height: 100vw; */
	width: 100%;
}

.login-btn{
	display: inline-block;
	padding-left: 30px !important;
	padding-right: 30px !important;
	height: 45px;
	line-height: 45px;
	background-color: #0088ff;
	color: #fff;
	font-size: 15px;
	width: 92%;
	margin: 0 auto;
}

.user-account ,.user-password{
	padding: 20px 10px;
}
.w-h-20{
	width: 20px;
	height: 20px;
}
</style>